@import "../comment/body";
@import "../comment/init";
@import "../comment/header";
@import "../comment/footer";
@import "../comment/constants";


.main{
  .wrapper{
    .main-content-wrapper{
      padding:0;
      .thumbnail-group{
        width:800px;
        height:200px;
        img{
          width:100%;
          height:100%;
        }
      }
      .payinfo-wrapper{
        padding:20px;
        .pay-list{
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          justify-content: space-between;
          li{
            height:150px;
            width:370px;
            border:1px solid #ccc;
            margin-bottom: 20px;
            &:hover{
              box-shadow: 2px 2px 2px #ccc;
            }
            .thumbnail{
              height:100%;
              width:100px;
              float: left;
              margin-right:20px;
              img{
                width:100%;
                height:100%;
              }
            }
            .title-group{
              float: right;
              width:250px;
              height:150px;
              position: relative;
              .title{
                font-size: 18px;
                color: #000;
              }
              .detail{
                font-size:14px;
                color: #878787;
                margin-top: 10px;
              }
              .price{
                font-size:18px;
                color: #f73e3e;
                position: absolute;
                left:10px;
                right:10px;
                bottom:10px;
                text-align: right;
              }
            }
          }
        }
      }
    }
  }
}